<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>搜索 - ${site.title}</title>
  <meta name="keywords" content="${site.seoKeywords}">
  <meta name="description" content="${site.seoDescription}">
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
  <link rel="stylesheet" href="${files}/vendor/flatpickr/dist/flatpickr.min.css">
  <script src="${files}/vendor/flatpickr/dist/flatpickr.min.js"></script>
  <script src="${files}/vendor/flatpickr/dist/l10n/index.js"></script>
</head>
<body>
[#assign headerShadow=true/]
[#include 'inc_header.html'/]
<div class="container">
  <form action="${dy}/search">
    <div class="d-xl-block mt-3">
      <div class="input-group">
        <input type="text" class="form-control" id="q" name="q" value="${Params.q}" placeholder="搜索" aria-label="搜索">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="submit">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"></path>
              <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="mt-3 p-3 bg-light">
      <div class="form-group row">
        <label for="channelId" class="col-sm-2 col-form-label">所属栏目</label>
        <div class="col-sm-10">
          <select class="custom-select form-control" id="channelId" name="channelId" onchange="this.form.submit();">
            <option [#if Params.channelId! == '']selected[/#if] value="">全部</option>
            [@ChannelList isNav='true' isAllowSearch='true' offset='0'; list]
              [#list list as item]
                <option [#if Params.channelId! == item.id?string]selected[/#if] value="${item.id}">${item.name}</option>
              [/#list]
            [/@ChannelList]
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label for="beginPublishDate_local" class="col-sm-2 col-form-label">时间范围</label>
        <div class="col-sm-10 form-inline">
          <button type="button" class="btn[#if Params['beginPublishDate']! == '' && Params['endPublishDate']! == ''] btn-primary[#else] btn-link[/#if]"
                  onclick="$('#beginPublishDate').val('');$('#endPublishDate').val('');this.form.submit();">
            全部
          </button>
          <button type="button" class="btn btn-link"
                  onclick="$('#beginPublishDate').val(dayjs().subtract(1, 'year').add(1, 'day').format('YYYY-MM-DD'));$('#endPublishDate').val(dayjs().add(1, 'day').format('YYYY-MM-DD'));this.form.submit();">
            一年内
          </button>
          <button type="button" class="btn btn-link"
                  onclick="$('#beginPublishDate').val(dayjs().subtract(1, 'month').add(1, 'day').format('YYYY-MM-DD'));$('#endPublishDate').val(dayjs().add(1, 'day').format('YYYY-MM-DD'));this.form.submit();">
            一月内
          </button>
          <button type="button" class="btn btn-link"
                  onclick="$('#beginPublishDate').val(dayjs().subtract(1, 'week').add(1, 'day').format('YYYY-MM-DD'));$('#endPublishDate').val(dayjs().add(1, 'day').format('YYYY-MM-DD'));this.form.submit();">
            一周内
          </button>
          <button type="button" class="btn btn-link"
                  onclick="$('#beginPublishDate').val(dayjs().format('YYYY-MM-DD'));$('#endPublishDate').val(dayjs().add(1, 'day').format('YYYY-MM-DD'));this.form.submit();">
            当天
          </button>
          <div class="input-group ml-2">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="far fa-calendar-alt text-black-50"></i></span>
            </div>
            <input type="text" class="form-control datepicker date" id="beginPublishDate_local"
                   data-init-value="${Params.beginPublishDate}"
                   onchange="if(this.value) $('#beginPublishDate').val(dayjs(this.value).format('YYYY-MM-DD')); else $('#beginPublishDate').val('')"
                   autocomplete="off" style="width:120px">
            <input type="hidden" id="beginPublishDate" name="beginPublishDate">
          </div>
          <div class="ml-2">-</div>
          <div class="input-group ml-2">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="far fa-calendar-alt text-black-50"></i></span>
            </div>
            <input type="text" class="form-control datepicker date" id="endPublishDate_local"
                   data-init-value="${Params.endPublishDate}"
                   onchange="if(this.value) $('#endPublishDate').val(dayjs(this.value).add(1, 'day').format('YYYY-MM-DD')); else $('#endPublishDate').val('')"
                   autocomplete="off" style="width:120px">
            <input type="hidden" id="endPublishDate" name="endPublishDate">
          </div>
          <button type="button" class="btn btn-primary ml-3" onclick="this.form.submit();">确定</button>
        </div>
      </div>
      <fieldset class="form-group row">
        <legend class="col-form-label col-sm-2 float-sm-left">搜索位置</legend>
        <div class="col-sm-10">
          <button type="button" class="btn [#if Params['isIncludeBody']! == '']btn-primary[#else]btn-link[/#if]"
                  onclick="$('#isIncludeBody').val('');this.form.submit();">
            搜索全文
          </button>
          <button type="button" class="btn [#if Params['isIncludeBody']! == 'false']btn-primary[#else]btn-link[/#if]"
                  onclick="$('#isIncludeBody').val('false');this.form.submit();">
            只搜索标题
          </button>
          <input type="hidden" id="isIncludeBody" name="isIncludeBody" value="${Params.isIncludeBody!}">
        </div>
      </fieldset>
      <fieldset class="form-group row">
        <legend class="col-form-label col-sm-2 float-sm-left">排序方式</legend>
        <div class="col-sm-10">
          <button type="button" class="btn [#if Params['orderBy']! == '']btn-primary[#else]btn-link[/#if]"
                  onclick="$('#orderBy').val('');this.form.submit();">
            按相关度
          </button>
          <button type="button" class="btn [#if Params['orderBy']! == 'publishDate_desc']btn-primary[#else]btn-link[/#if]"
                  onclick="$('#orderBy').val('publishDate_desc');this.form.submit();">
            按时间倒序
          </button>
          <button type="button" class="btn [#if Params['orderBy']! == 'publishDate']btn-primary[#else]btn-link[/#if]"
                  onclick="$('#orderBy').val('publishDate');this.form.submit();">
            按时间正序
          </button>
          <input type="hidden" id="orderBy" name="orderBy" value="${Params.orderBy!}">
        </div>
      </fieldset>
    </div>
  </form>
  [#if Params.q!?trim != '']
    [@EsArticlePage q=Params.q! channelId=Params.channelId! beginPublishDate=Params.beginPublishDate! endPublishDate=Params.endPublishDate! isOperatorAnd='true' fragmentSize='200' isIncludeBody=Params.isIncludeBody! dateExpScale='365' orderBy=Params.orderBy!; pagedList]
      <h3 class="mt-3">搜索结果</h3>
      <p class="small text-muted">为您找到相关结果 ${pagedList.totalElements} 篇</p>
      <ul class="list-unstyled">
        [#list pagedList.content as bean]
          <li class="mt-3 media border-bottom position-relative pb-3">
            [#if bean.image??][@A bean=bean class="mr-3"]<img src="${bean.image}" class="rounded-sm cm-media-img" alt="${bean.title}">[/@A][/#if]
            <div class="media-body es-highlight">
              <p class="mt-0 mb-1">[@A bean=bean class="cm-link text-decoration-none"][#noescape]${bean.highlightTitle!bean.title!}[/#noescape][/@A]</p>
              <p class="text-muted d-none d-sm-block mb-2">
                [@A bean=bean class="text-reset small text-decoration-none"][#noescape]${bean.highlightBody!substring(bean.body,100,'...')!}[/#noescape][/@A]
              </p>
              <div class="small text-muted mt-3 clearfix">
                <div class="float-left">
                  <span>[#list bean.channel.paths as c][@A bean=c/][#if c_has_next] > [/#if][/#list]</span>
                </div>
                <div class="float-right"><i class="ml-2 far fa-clock"></i> ${format(bean.publishDate, 'yyyy-MM-dd')}</div>
              </div>
            </div>
          </li>
        [/#list]
      </ul>
      [#include 'inc_page.html'/]
    [/@EsArticlePage]
  [/#if]
</div>

<script>
  $(function () {
    $('.datepicker').each(function () {
      var initValue = $(this).data('init-value');
      if (initValue) {
        if ($(this).attr('id') === 'endPublishDate_local') {
          $(this).val(dayjs(initValue).subtract(1, 'day').format('YYYY-MM-DD'));
        } else {
          $(this).val(dayjs(initValue).format('YYYY-MM-DD'));
        }
      }
      $(this).change().flatpickr({
        locale: 'zh',
        allowInput: true,
        dateFormat: 'Y-m-d'
      });
    });
  });
</script>

[#include 'inc_footer.html'/]
</body>
</html>
[/#escape]
